<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${job.id != null ? '编辑岗位' : '发布岗位'} + ' - SimpleHire'">岗位表单 - SimpleHire</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #6366f1;
            --primary-dark: #4f46e5;
            --secondary-color: #8b5cf6;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --light-bg: #f8fafc;
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --border-radius: 12px;
            --transition: all 0.3s ease;
        }
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 2rem 0;
        }
        
        .form-header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            color: var(--primary-color);
            border-radius: var(--border-radius);
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .form-section {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            padding: 2rem;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: var(--transition);
        }
        
        .form-section:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.15);
        }
        
        .skill-input-container {
            position: relative;
        }
        
        .skill-tag {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-size: 0.875rem;
            font-weight: 500;
            margin: 0.25rem;
            display: inline-block;
            position: relative;
            transition: var(--transition);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .skill-tag:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .skill-tag .remove-skill {
            margin-left: 0.5rem;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.8);
            transition: var(--transition);
        }
        
        .skill-tag .remove-skill:hover {
            color: white;
            transform: scale(1.1);
        }
        
        .preview-section {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            padding: 2rem;
            position: sticky;
            top: 2rem;
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .char-counter {
            font-size: 0.75rem;
            color: #6c757d;
        }
        .char-counter.warning {
            color: #ffc107;
        }
        .char-counter.danger {
            color: #dc3545;
        }
        .form-floating textarea {
            min-height: 120px;
        }
        .required-field::after {
            content: ' *';
            color: #dc3545;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-briefcase-fill me-2"></i>SimpleHire
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/resume/analysis">简历分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/interview">AI面试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/job-matching">岗位匹配</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span sec:authentication="name">用户</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><a class="dropdown-item" href="/job-matching/manage">岗位管理</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- 返回按钮 -->
        <div class="mb-3">
            <a href="/job-matching/manage" class="btn btn-outline-secondary me-2">
                <i class="bi bi-arrow-left me-1"></i>返回管理页面
            </a>
            <a href="/job-matching" class="btn btn-outline-secondary">
                <i class="bi bi-list me-1"></i>岗位列表
            </a>
        </div>

        <!-- 页面标题 -->
        <div class="form-header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="display-6 mb-2">
                        <i th:class="${job.id != null ? 'bi bi-pencil-square' : 'bi bi-plus-circle'}" class="me-3"></i>
                        <span th:text="${job.id != null ? '编辑岗位' : '发布新岗位'}">岗位表单</span>
                    </h1>
                    <p class="mb-0" th:text="${job.id != null ? '修改岗位信息，吸引更多优秀人才' : '发布您的岗位需求，找到合适的候选人'}">描述文本</p>
                </div>
                <div class="col-md-4 text-end">
                    <div class="d-none d-md-block">
                        <i class="bi bi-lightbulb display-4 opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 消息提示 -->
        <div th:if="${success}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i>
            <span th:text="${success}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>

        <div class="row">
            <!-- 左侧：表单 -->
            <div class="col-lg-8">
                <form th:action="${job.id != null ? '/job-matching/edit/' + job.id : '/job-matching/create'}" 
                      method="post" th:object="${job}" id="jobForm">
                    
                    <!-- 基本信息 -->
                    <div class="form-section">
                        <h5 class="mb-3">
                            <i class="bi bi-info-circle me-2"></i>基本信息
                        </h5>
                        
                        <div class="row g-3">
                            <div class="col-md-8">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="title" th:field="*{title}" 
                                           placeholder="岗位标题" required maxlength="100">
                                    <label for="title" class="required-field">岗位标题</label>
                                </div>
                                <div class="char-counter mt-1">
                                    <span id="titleCounter">0</span>/100 字符
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <select class="form-select" id="status" th:field="*{status}">
                                        <option value="ACTIVE">活跃</option>
                                        <option value="INACTIVE">暂停</option>
                                    </select>
                                    <label for="status">状态</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row g-3 mt-2">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="companyName" th:field="*{companyName}" 
                                           placeholder="公司名称" required maxlength="100">
                                    <label for="companyName" class="required-field">公司名称</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="workLocation" th:field="*{workLocation}" 
                                           placeholder="工作地点" maxlength="100">
                                    <label for="workLocation">工作地点</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row g-3 mt-2">
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <select class="form-select" id="industry" th:field="*{industry}">
                                        <option value="">请选择行业</option>
                                        <option th:each="industry : ${industries}" 
                                                th:value="${industry}" 
                                                th:text="${industry}"></option>
                                    </select>
                                    <label for="industry">行业</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <select class="form-select" id="jobType" th:field="*{jobType}">
                                        <option value="">请选择类型</option>
                                        <option th:each="type : ${jobTypes}" 
                                                th:value="${type}" 
                                                th:text="${type}"></option>
                                    </select>
                                    <label for="jobType">工作类型</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="salaryRange" th:field="*{salaryRange}" 
                                           placeholder="薪资范围" maxlength="50">
                                    <label for="salaryRange">薪资范围</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 岗位描述 -->
                    <div class="form-section">
                        <h5 class="mb-3">
                            <i class="bi bi-file-text me-2"></i>岗位描述
                        </h5>
                        
                        <div class="form-floating">
                            <textarea class="form-control" id="description" th:field="*{description}" 
                                      placeholder="详细描述岗位职责、工作内容等" required 
                                      style="min-height: 150px;" maxlength="2000"></textarea>
                            <label for="description" class="required-field">岗位描述</label>
                        </div>
                        <div class="char-counter mt-1">
                            <span id="descriptionCounter">0</span>/2000 字符
                        </div>
                    </div>

                    <!-- 职责要求 -->
                    <div class="form-section">
                        <h5 class="mb-3">
                            <i class="bi bi-list-check me-2"></i>工作职责
                        </h5>
                        
                        <div class="form-floating">
                            <textarea class="form-control" id="responsibilities" th:field="*{responsibilities}" 
                                      placeholder="列出主要工作职责和任务" 
                                      style="min-height: 120px;" maxlength="1500"></textarea>
                            <label for="responsibilities">工作职责</label>
                        </div>
                        <div class="char-counter mt-1">
                            <span id="responsibilitiesCounter">0</span>/1500 字符
                        </div>
                    </div>

                    <!-- 技能要求 -->
                    <div class="form-section">
                        <h5 class="mb-3">
                            <i class="bi bi-gear me-2"></i>技能要求
                        </h5>
                        
                        <div class="skill-input-container mb-3">
                            <div class="input-group">
                                <input type="text" class="form-control" id="skillInput" 
                                       placeholder="输入技能关键词，按回车添加" maxlength="30">
                                <button type="button" class="btn btn-outline-secondary" onclick="addSkill()">
                                    <i class="bi bi-plus"></i>
                                </button>
                            </div>
                            <small class="text-muted">例如：Java、Spring Boot、MySQL、团队协作等</small>
                        </div>
                        
                        <div id="skillTags" class="mb-3">
                            <!-- 技能标签将在这里显示 -->
                        </div>
                        
                        <input type="hidden" id="requiredSkills" th:field="*{requiredSkills}">
                    </div>

                    <!-- 任职要求 -->
                    <div class="form-section">
                        <h5 class="mb-3">
                            <i class="bi bi-person-check me-2"></i>任职要求
                        </h5>
                        
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <select class="form-select" id="experienceLevel" th:field="*{experienceLevel}">
                                        <option value="">请选择经验要求</option>
                                        <option th:each="level : ${experienceLevels}" 
                                                th:value="${level}" 
                                                th:text="${level}"></option>
                                    </select>
                                    <label for="experienceLevel">经验要求</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <select class="form-select" id="educationLevel" th:field="*{educationLevel}">
                                        <option value="">请选择学历要求</option>
                                        <option th:each="level : ${educationLevels}" 
                                                th:value="${level}" 
                                                th:text="${level}"></option>
                                    </select>
                                    <label for="educationLevel">学历要求</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-floating">
                            <textarea class="form-control" id="requirements" th:field="*{requirements}" 
                                      placeholder="详细说明任职要求、能力要求等" 
                                      style="min-height: 120px;" maxlength="1500"></textarea>
                            <label for="requirements">详细要求</label>
                        </div>
                        <div class="char-counter mt-1">
                            <span id="requirementsCounter">0</span>/1500 字符
                        </div>
                    </div>

                    <!-- 福利待遇 -->
                    <div class="form-section">
                        <h5 class="mb-3">
                            <i class="bi bi-gift me-2"></i>福利待遇
                        </h5>
                        
                        <div class="form-floating">
                            <textarea class="form-control" id="benefits" th:field="*{benefits}" 
                                      placeholder="描述公司提供的福利待遇、发展机会等" 
                                      style="min-height: 120px;" maxlength="1000"></textarea>
                            <label for="benefits">福利待遇</label>
                        </div>
                        <div class="char-counter mt-1">
                            <span id="benefitsCounter">0</span>/1000 字符
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="form-section">
                        <div class="d-flex justify-content-between">
                            <div>
                                <button type="button" class="btn btn-outline-secondary me-2" onclick="saveDraft()">
                                    <i class="bi bi-save me-1"></i>保存草稿
                                </button>
                                <button type="button" class="btn btn-outline-info" onclick="previewJob()">
                                    <i class="bi bi-eye me-1"></i>预览
                                </button>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i th:class="${job.id != null ? 'bi bi-check-circle' : 'bi bi-plus-circle'}" class="me-2"></i>
                                    <span th:text="${job.id != null ? '更新岗位' : '发布岗位'}">提交</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 右侧：预览和提示 -->
            <div class="col-lg-4">
                <!-- 填写提示 -->
                <div class="preview-section mb-4">
                    <h6 class="mb-3">
                        <i class="bi bi-lightbulb me-2"></i>填写提示
                    </h6>
                    <div class="small">
                        <div class="mb-2">
                            <i class="bi bi-check-circle text-success me-1"></i>
                            <strong>岗位标题：</strong>简洁明了，包含关键词
                        </div>
                        <div class="mb-2">
                            <i class="bi bi-check-circle text-success me-1"></i>
                            <strong>岗位描述：</strong>详细说明工作内容和职责
                        </div>
                        <div class="mb-2">
                            <i class="bi bi-check-circle text-success me-1"></i>
                            <strong>技能要求：</strong>列出核心技能和工具
                        </div>
                        <div class="mb-2">
                            <i class="bi bi-check-circle text-success me-1"></i>
                            <strong>任职要求：</strong>明确经验和学历要求
                        </div>
                        <div class="mb-2">
                            <i class="bi bi-check-circle text-success me-1"></i>
                            <strong>福利待遇：</strong>突出公司优势和发展机会
                        </div>
                    </div>
                </div>

                <!-- 表单进度 -->
                <div class="preview-section mb-4">
                    <h6 class="mb-3">
                        <i class="bi bi-bar-chart me-2"></i>完成进度
                    </h6>
                    <div class="progress mb-2" style="height: 8px;">
                        <div class="progress-bar" id="formProgress" style="width: 0%"></div>
                    </div>
                    <div class="small text-muted" id="progressText">0% 完成</div>
                    
                    <div class="mt-3 small">
                        <div id="requiredFields">
                            <div class="text-muted">必填字段：</div>
                            <div class="ms-2">
                                <div id="titleCheck"><i class="bi bi-circle text-muted"></i> 岗位标题</div>
                                <div id="companyCheck"><i class="bi bi-circle text-muted"></i> 公司名称</div>
                                <div id="descriptionCheck"><i class="bi bi-circle text-muted"></i> 岗位描述</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="preview-section">
                    <h6 class="mb-3">
                        <i class="bi bi-lightning me-2"></i>快速操作
                    </h6>
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-primary" onclick="fillTemplate()">
                            <i class="bi bi-magic me-2"></i>使用模板
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="clearForm()">
                            <i class="bi bi-arrow-clockwise me-2"></i>重置表单
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 自定义JS -->
    <script>
        let skills = [];
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载现有技能
            const existingSkills = document.getElementById('requiredSkills').value;
            if (existingSkills) {
                skills = existingSkills.split(',').filter(s => s.trim());
                updateSkillTags();
            }
            
            // 设置字符计数器
            setupCharCounters();
            
            // 设置表单验证
            setupFormValidation();
            
            // 初始化进度
            updateProgress();
        });
        
        // 技能管理
        function addSkill() {
            const input = document.getElementById('skillInput');
            const skill = input.value.trim();
            
            if (skill && !skills.includes(skill) && skills.length < 20) {
                skills.push(skill);
                input.value = '';
                updateSkillTags();
                updateSkillsInput();
            }
        }
        
        function removeSkill(skill) {
            skills = skills.filter(s => s !== skill);
            updateSkillTags();
            updateSkillsInput();
        }
        
        function updateSkillTags() {
            const container = document.getElementById('skillTags');
            container.innerHTML = skills.map(skill => 
                `<span class="skill-tag">
                    ${skill}
                    <span class="remove-skill" onclick="removeSkill('${skill}')">
                        <i class="bi bi-x"></i>
                    </span>
                </span>`
            ).join('');
        }
        
        function updateSkillsInput() {
            document.getElementById('requiredSkills').value = skills.join(',');
        }
        
        // 技能输入回车处理
        document.getElementById('skillInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                addSkill();
            }
        });
        
        // 字符计数器
        function setupCharCounters() {
            const fields = [
                { id: 'title', counter: 'titleCounter', max: 100 },
                { id: 'description', counter: 'descriptionCounter', max: 2000 },
                { id: 'responsibilities', counter: 'responsibilitiesCounter', max: 1500 },
                { id: 'requirements', counter: 'requirementsCounter', max: 1500 },
                { id: 'benefits', counter: 'benefitsCounter', max: 1000 }
            ];
            
            fields.forEach(field => {
                const element = document.getElementById(field.id);
                const counter = document.getElementById(field.counter);
                
                function updateCounter() {
                    const length = element.value.length;
                    counter.textContent = length;
                    
                    const parent = counter.parentElement;
                    parent.classList.remove('warning', 'danger');
                    
                    if (length > field.max * 0.9) {
                        parent.classList.add('danger');
                    } else if (length > field.max * 0.8) {
                        parent.classList.add('warning');
                    }
                    
                    updateProgress();
                }
                
                element.addEventListener('input', updateCounter);
                updateCounter();
            });
        }
        
        // 表单验证
        function setupFormValidation() {
            const requiredFields = ['title', 'companyName', 'description'];
            
            requiredFields.forEach(fieldId => {
                const field = document.getElementById(fieldId);
                field.addEventListener('input', function() {
                    updateFieldCheck(fieldId, this.value.trim() !== '');
                    updateProgress();
                });
                
                // 初始检查
                updateFieldCheck(fieldId, field.value.trim() !== '');
            });
        }
        
        function updateFieldCheck(fieldId, isValid) {
            const checkElement = document.getElementById(fieldId + 'Check');
            const icon = checkElement.querySelector('i');
            
            if (isValid) {
                icon.className = 'bi bi-check-circle text-success';
            } else {
                icon.className = 'bi bi-circle text-muted';
            }
        }
        
        // 进度更新
        function updateProgress() {
            const requiredFields = ['title', 'companyName', 'description'];
            const optionalFields = ['workLocation', 'industry', 'jobType', 'salaryRange', 
                                  'responsibilities', 'requirements', 'benefits', 'experienceLevel', 'educationLevel'];
            
            let completedRequired = 0;
            let completedOptional = 0;
            
            requiredFields.forEach(fieldId => {
                if (document.getElementById(fieldId).value.trim()) {
                    completedRequired++;
                }
            });
            
            optionalFields.forEach(fieldId => {
                const field = document.getElementById(fieldId);
                if (field && field.value.trim()) {
                    completedOptional++;
                }
            });
            
            // 技能检查
            if (skills.length > 0) {
                completedOptional++;
            }
            
            const requiredProgress = (completedRequired / requiredFields.length) * 60;
            const optionalProgress = (completedOptional / (optionalFields.length + 1)) * 40;
            const totalProgress = Math.round(requiredProgress + optionalProgress);
            
            document.getElementById('formProgress').style.width = totalProgress + '%';
            document.getElementById('progressText').textContent = totalProgress + '% 完成';
        }
        
        // 模板填充
        function fillTemplate() {
            if (confirm('使用模板会覆盖当前内容，确定继续吗？')) {
                document.getElementById('title').value = 'Java开发工程师';
                document.getElementById('companyName').value = '科技有限公司';
                document.getElementById('workLocation').value = '北京';
                document.getElementById('description').value = '负责公司核心业务系统的开发和维护，参与系统架构设计，编写高质量代码。';
                document.getElementById('responsibilities').value = '1. 参与系统需求分析和技术方案设计\n2. 负责核心模块的开发和优化\n3. 编写技术文档和代码注释\n4. 参与代码评审和技术分享';
                document.getElementById('requirements').value = '1. 计算机相关专业本科及以上学历\n2. 3年以上Java开发经验\n3. 熟悉Spring、MyBatis等框架\n4. 具备良好的团队协作能力';
                document.getElementById('benefits').value = '五险一金、带薪年假、弹性工作、技能培训、晋升机会';
                
                skills = ['Java', 'Spring Boot', 'MySQL', 'Redis', 'Git'];
                updateSkillTags();
                updateSkillsInput();
                
                // 触发所有输入事件
                document.querySelectorAll('input, textarea, select').forEach(field => {
                    field.dispatchEvent(new Event('input'));
                });
            }
        }
        
        // 清空表单
        function clearForm() {
            if (confirm('确定要清空所有内容吗？')) {
                document.getElementById('jobForm').reset();
                skills = [];
                updateSkillTags();
                updateSkillsInput();
                updateProgress();
            }
        }
        
        // 保存草稿
        function saveDraft() {
            // 这里可以实现草稿保存功能
            alert('草稿保存功能待实现');
        }
        
        // 预览
        function previewJob() {
            // 这里可以实现预览功能
            alert('预览功能待实现');
        }
        
        // 表单提交前验证
        document.getElementById('jobForm').addEventListener('submit', function(e) {
            const requiredFields = [
                { id: 'title', name: '岗位标题' },
                { id: 'companyName', name: '公司名称' },
                { id: 'description', name: '岗位描述' }
            ];
            
            for (let field of requiredFields) {
                if (!document.getElementById(field.id).value.trim()) {
                    e.preventDefault();
                    alert('请填写' + field.name);
                    document.getElementById(field.id).focus();
                    return;
                }
            }
        });
    </script>
</body>
</html>